<template>
    <div class="container">
        <div class="content_wrapper">
            <div class="lyecs-form-table">
                <el-form ref="formRef" :model="formState" label-width="auto">
                    <el-form-item label="手机号">
                        {{ formState.mobile }}
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '验证码不能为空!' }]" label="验证码" prop="mobile_code">
                        <MobileCode
                            v-model:mobile="formState.mobile"
                            v-model:mobileCode="formState.code"
                            :requestApi="setAdminCode"
                            :showMessage="true"
                            class="mobile-code-text"
                            @mobileErrorCallback="mobileErrorCallback"
                        ></MobileCode>
                    </el-form-item>
                    <el-form-item label="旧密码：" prop="old_password" :rules="[{ required: true, message: '旧密码不能为空!', trigger: 'blur' }]">
                        <el-input type="password" v-model="formState.old_password" />
                    </el-form-item>
                    <el-form-item label="新密码：" prop="password" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
                        <el-input type="password" v-model="formState.password" />
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="pwd_confirm" :rules="[{ required: true, validator: validatePwd, trigger: 'blur' }]">
                        <el-input type="password" v-model="formState.pwd_confirm" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref, shallowRef, computed} from "vue"
import {useRouter} from 'vue-router'
import {message} from "ant-design-vue";
import { MobileCode } from "@/components/form";
import { AccountPassWordEditingFormState } from "@/types/authority/accountEditing";
import { adminInfoSubmit, setAdminCode } from "@/api/authority/accountEditing";
const emit = defineEmits(["submitCallback", "update:confirmLoading", "close"]);
const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
    form: {
        type: Object,
        default: {}
    },
    isDialog: Boolean
});
const formRef = shallowRef();
const formState = ref<AccountPassWordEditingFormState>({
    mobile: props.form.mobile,
    code: "",
    old_password: "",
    password: "",
    pwd_confirm: "",
});
const validatePwd = (rule: any, value: any, callback: any) => {
    if (!value) {
        callback(new Error('确认密码不能为空'))
        return;
    }
    // 判断是否符合国际手机号格式
    if (formState.value.password == value) {
        callback()
    } else {
        callback('两次密码输入不一致')
    }
}
// 表单通过验证后提交
const onSubmit = async () => {
    await formRef.value.validate();
    try {
        emit('update:confirmLoading', true);
        const result = await adminInfoSubmit({modify_type: 2, ...formState.value});
        emit('submitCallback', result);
        message.success(result.message);
    } catch (error:any) {
        message.error(error.message);
    } finally {
        emit('update:confirmLoading', false);
    }
};
// 表单提交
const onFormSubmit = () => {
    onSubmit()
};
const errorMessage = ref("");
const mobileErrorCallback = (e: any) => {
    errorMessage.value = e;
};

defineExpose({ onFormSubmit });
</script>
